<template>
	<el-card class="personal_card" shadow="never">
		<template slot="header">
			<h4>{{ title }}</h4>
			<template v-if="!!goto">
				<el-button type="text" @click="handleGotoPage()">
					更多
					<i class="el-icon-d-arrow-right"></i>
				</el-button>
			</template>
		</template>
		<slot></slot>
	</el-card>
</template>

<script>
export default {
	props: {
		title: { type: String, default: '' },
		goto: { type: String, default: '' }
	},
	methods: {
		handleGotoPage() {
			this.$router.push({ path: this.goto });
		}
	}
};
</script>

<style lang="scss" scoped>
.personal_card {
	&:deep(.el-card__header) {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 18px;
		font-weight: bold;
		line-height: 1;
		padding: 16px;
		border-bottom: none;
		.el-button {
			padding: 0;
			font-size: 16px;
			line-height: 1;
		}
	}

	&:deep(.el-card__body) {
		padding: 0 16px 16px;

		.el-table {
			border: solid 1px #ebeef5;
			border-bottom: none;
		}

		.has-gutter th {
			background-color: #f5f7fa;
		}
	}
}
</style>
